<link type="text/css" rel="stylesheet" href="${ctx}/display/displaymodel.css" />
<link type="text/css" rel="stylesheet" href="${ctx}/display/jquery.qtip.min.css" />
<link type="text/css" rel="stylesheet" href="${ctx}/workflowStatic/style/css/definition.node.css" />
<script src="${ctx}/extends/jquery.min.js" type="text/javascript"></script>
<script src="${ctx}/display/jquery.qtip.min.js"></script>
<script src="${ctx}/display/raphael.js"></script>
<script src="${ctx}/workflowStatic/js/displaymodel.js"></script>
<script src="${ctx}/workflowStatic/js/bpmn-draw.js"></script>
<script src="${ctx}/workflowStatic/js/bpmn-icons.js"></script>
<script src="${ctx}/workflowStatic/js/Polyline.js"></script>
<div id="bpmnModel" style="margin-bottom: 15px;margin-left: 10px;font-size: 8px;color: blue"></div>

<script type="text/javascript">
    var modelId = "${modelId}";

    $(function () {
        showDiagram(modelId);
    });

    function showDiagram(modelId) {
        var modelUrl = '${ctx}/workflow/bpmnImage/json/getByModelId';
        $.ajax({
            url: modelUrl + '?nocaching=' + new Date().getTime()+'&modelId='+modelId,
            type: "get",
            contentType: 'application/json',
            dataType: 'json',
            success: function (data) {
                if ((!data.elements || data.elements.length == 0) && (!data.pools || data.pools.length == 0)) return;

                INITIAL_CANVAS_WIDTH = data.diagramWidth;
                INITIAL_CANVAS_WIDTH += 30;

                INITIAL_CANVAS_HEIGHT = data.diagramHeight + 50;
                canvasWidth = INITIAL_CANVAS_WIDTH;
                canvasHeight = INITIAL_CANVAS_HEIGHT;
                viewBoxWidth = INITIAL_CANVAS_WIDTH;
                viewBoxHeight = INITIAL_CANVAS_HEIGHT;

                $('#bpmnModel').width(INITIAL_CANVAS_WIDTH);
                $('#bpmnModel').height(INITIAL_CANVAS_HEIGHT);
                <!--创建画布-->
                paper = Raphael(document.getElementById('bpmnModel'), canvasWidth, canvasHeight);
                paper.setViewBox(0, 0, viewBoxWidth, viewBoxHeight, false);
                paper.renderfix();

                if (data.pools)
                {
                    for (var i = 0; i < data.pools.length; i++)
                    {
                        var pool = data.pools[i];
                        _drawPool(pool);
                    }
                }

                var modelElements = data.elements;
                for (var i = 0; i < modelElements.length; i++)
                {
                    var element = modelElements[i];
                    var drawFunction = eval("_draw" + element.type);
                    drawFunction(element);
                }

                if (data.flows)
                {
                    for (var i = 0; i < data.flows.length; i++)
                    {
                        var flow = data.flows[i];
                        if (flow.type === 'sequenceFlow') {
                            _drawFlow(flow);
                        } else if (flow.type === 'association') {
                            _drawAssociation(flow);
                        }
                    }
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert("暂无数据，请稍后操作！" + XMLHttpRequest.status);
            }
        });
    }

</script>
